<template>
  <view class="container">
    <!-- 顶部标题与设备编号 -->
    <view class="header">
      <text class="title">{{ deviceName }}</text>
      <text class="device-id">{{ deviceId }}</text>
    </view>

    <!-- 三项状态卡片 -->
    <view class="metrics">
      <view class="metric-card">
        <text class="metric-label">温度</text>
        <text class="metric-value">{{ temp }}°C</text>
      </view>
      <view class="metric-card">
        <text class="metric-label">湿度</text>
        <text class="metric-value">{{ humidity }}%</text>
      </view>
      <view class="metric-card">
        <text class="metric-label">信号</text>
        <text class="metric-value">{{ signal }}%</text>
      </view>
    </view>

    <!-- 模拟量 -->
    <view class="analog">
      <view class="analog-row">
        <text class="analog-label">模拟量-AI1：</text>
        <u-input placeholder="请输入模拟量" v-model="ai1"  />
        <text class="unit-display" @longpress="longPressUnit(1)">{{ ai1Unit || '长按设置单位' }}</text>
      </view>
      <view class="analog-row">
        <text class="analog-label">模拟量-AI2：</text>
          <u-input placeholder="请输入模拟量" v-model="ai2" />
          <text class="unit-display" @longpress="longPressUnit(2)">{{ ai2Unit || '长按设置单位' }}</text>
      </view>
    </view>

    <!-- DI 开关与刷新 -->
    <view class="di-area">
      <view class="di-btn" type="primary" @click="toggleDI(1)">
        {{ di1Open ? "闭合" : "断开" }}</br>
        <div>开关-DI1</div>
      </view>
      <view class="di-btn" type="primary" @click="toggleDI(2)">
        {{ di2Open ? "闭合" : "断开" }}</br>
        <div>开关-DI2</div>
      </view>
      <view class="refresh" @click="refreshData">
        <u-icon name="reload" color="#55F3B1" size="24"></u-icon>
        <text class="refresh-text">手动刷新数据</text>
      </view>
    </view>

    <text class="tip">长按开关按钮，可以切换对应的动作</text>

    <!-- 4个开关 -->
    <view class="switch-grid">
      <view
        v-for="(st, idx) in switchStates"
        :key="idx"
        class="switch-item"
        @click="toggleSwitch(idx)"
        @longpress="longPressSwitch(idx)"
      >
        <u-icon
          :name="st ? 'play-circle' : 'pause-circle'"
          :color="st ? '#3ec787' : '#60a4f7'"
          size="28"
        />
        <text class="switch-text">{{ switchNames[idx] }}</text>
      </view>
    </view>

    <!-- 全开/全关 -->
    <view class="all-area">
      <view class="all-btn on" @click="toggleAll(true)">
        <u-icon name="checkmark-circle" color="#3ec787" size="22" />
        <text>全开</text>
      </view>
      <view class="all-btn off" @click="toggleAll(false)">
        <u-icon name="close" color="#9dbff6" size="22" />
        <text>全关</text>
      </view>
    </view>

    <!-- 底部功能入口 -->
    <view class="actions">
      <view class="action" @click="go('/pages/index/countdown/index')">
        <u-icon name="clock" color="#60a4f7" size="22" />
        <text>倒计时</text>
      </view>
      <view class="action" @click="go('/pages/index/localTiming/index')">
        <u-icon name="calendar" color="#60a4f7" size="22" />
        <text>本地定时</text>
      </view>
      <view class="action" @click="go('/pages/index/localTiming/index')">
        <u-icon name="calendar" color="#60a4f7" size="22" />
        <text>云端控制</text>
      </view>
      <view class="action"  @click="go('/pages/index/paramSettings/index')">
        <u-icon name="warning" color="#60a4f7" size="22" />
        <text>参数设置</text>
      </view>
    </view>
    <u-popup :show="unitPopupVisible" mode="center" @close="unitPopupVisible=false" :safe-area-inset-bottom="false">
      <view class="unit-popup">
        <text class="popup-title" style="margin-bottom: 12rpx;">设置单位</text>
        <u-input v-model="unitInputValue" placeholder="请输入单位" />
        <view class="popup-actions">
          <view class="popup-btn" @click="cancelUnit">取消</view>
          <view class="popup-btn confirm" @click="confirmUnit">确定</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="namePopupVisible" mode="center" @close="namePopupVisible=false" :safe-area-inset-bottom="false">
      <view class="unit-popup">
        <text class="popup-title" style="margin-bottom: 12rpx;">修改开关名称</text>
        <u-input v-model="nameInputValue" placeholder="请输入名称" />
        <view class="popup-actions">
          <view class="popup-btn" @click="cancelName">取消</view>
          <view class="popup-btn confirm" @click="confirmName">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceName: "4G智能开关",
      deviceId: "MAL2434",
      temp: -50,
      humidity: 0,
      signal: 0,
      ai1: 0,
      ai2: 0,
      ai1Unit: "",
      ai2Unit: "",
      switchNames: ["开关1", "开关2", "开关3", "开关4"],
      di1Open: false,
      di2Open: false,
      switchStates: [false, false, false, false],
      unitPopupVisible: false,
      unitEditingIndex: null,
      unitInputValue: "",
      namePopupVisible: false,
      nameEditingIndex: null,
      nameInputValue: "",
      options: {},
    };
  },
  onLoad(options) {
    this.options = options || {};
    // 可选：从参数里接收设备编号等信息
    if (options && options.deviceId) {
      this.deviceId = options.deviceId;
    }
  },
  methods: {
    longPressUnit(index) {
      this.unitEditingIndex = index;
      this.unitInputValue = index === 1 ? this.ai1Unit : this.ai2Unit;
      this.unitPopupVisible = true;
    },
    confirmUnit() {
      if (this.unitEditingIndex === 1) {
        this.ai1Unit = this.unitInputValue;
      } else if (this.unitEditingIndex === 2) {
        this.ai2Unit = this.unitInputValue;
      }
      this.unitPopupVisible = false;
      this.unitEditingIndex = null;
      this.unitInputValue = "";
    },
    cancelUnit() {
      this.unitPopupVisible = false;
      this.unitEditingIndex = null;
      this.unitInputValue = "";
    },
    longPressSwitch(idx) {
      this.nameEditingIndex = idx;
      this.nameInputValue = this.switchNames[idx];
      this.namePopupVisible = true;
    },
    confirmName() {
      if (this.nameEditingIndex !== null) {
        this.$set(this.switchNames, this.nameEditingIndex, this.nameInputValue || `开关${this.nameEditingIndex + 1}`);
      }
      this.namePopupVisible = false;
      this.nameEditingIndex = null;
      this.nameInputValue = "";
    },
    cancelName() {
      this.namePopupVisible = false;
      this.nameEditingIndex = null;
      this.nameInputValue = "";
    },
    toggleDI(n) {
      if (n === 1) this.di1Open = !this.di1Open;
      if (n === 2) this.di2Open = !this.di2Open;
      uni.showToast({
        title: `DI${n} ${
          n === 1
            ? this.di1Open
              ? "闭合"
              : "断开"
            : this.di2Open
            ? "闭合"
            : "断开"
        }`,
        icon: "none",
      });
    },
    toggleSwitch(idx) {
      this.$set(this.switchStates, idx, !this.switchStates[idx]);
    },
    toggleAll(on) {
      this.switchStates = this.switchStates.map(() => on);
      uni.showToast({ title: on ? "全部开启" : "全部关闭", icon: "none" });
    },
    refreshData() {
      uni.showToast({ title: "刷新数据", icon: "none" });
    },
    go(url) {
      uni.navigateTo({ url });
    },
    cloudControl() {
      uni.showToast({ title: "云端控制占位", icon: "none" });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  height: 100%;
  background: #f6f7fb;
  padding: 16rpx 30rpx 30rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 4rpx;
}
.title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1e1f23;
}
.device-id {
  font-size: 24rpx;
  color: #8b8d93;
}

.metrics {
  display: flex;
  gap: 12rpx;
  margin: 18rpx 0;
}
.metric-card {
  flex: 1;
  background: #60a4f7;
  border-radius: 12rpx;
  padding: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.metric-label {
  color: #ffffff;
  font-size: 24rpx;
}
.metric-value {
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 600;
}

.analog {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 14rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.analog-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 12rpx 6rpx;
  
}
.analog-label {
  color: #1e1f23;
  font-size: 26rpx;
}
.analog-value {
  color: #60a4f7;
  font-size: 26rpx;
  width: 120rpx;
  text-align: right;
}
.unit-display {
  color: #60a4f7;
  font-size: 26rpx;
  width: 180rpx;
  padding: 6rpx 12rpx;
  border: 1rpx solid #9dbff6;
  border-radius: 8rpx;
  text-align: center;
  box-sizing: border-box;
   height: 76rpx;
   display: flex;
   align-items: center;
}

.di-area {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin: 18rpx 0;
  justify-content: space-between;
}
.di-btn {
  // flex: 1;
  height: 120rpx;
  background-color: #60A4F7;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #FFFFFF;
  align-items: center;
}
.refresh {
 width: 30%;
  height: 120rpx;
  background-color: #60A4F7;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #FFFFFF;
  align-items: center;
}
.refresh-text {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: white;
}

.tip {
  color: #8b8d93;
  font-size: 22rpx;
  margin: 6rpx 0 12rpx;
  display: block;
}

.switch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}
.switch-item {
  background: #ffffff;
  border-radius: 12rpx;
  height: 160rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.switch-text {
  margin-top: 8rpx;
  color: #8b8d93;
  font-size: 24rpx;
}

.all-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin: 18rpx 0;
}
.all-btn {
  height: 140rpx;
  border-radius: 12rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.all-btn.on {
  color: #3ec787;
}
.all-btn.off {
  color: #9dbff6;
}

.actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
}
.action {
  background: #ffffff;
  border-radius: 12rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  color: #60a4f7;
  font-size: 22rpx;
}
.unit-popup {
  width: 520rpx;
  padding: 24rpx;
}
.popup-title {
  font-size: 30rpx;
  color: #1e1f23;
  margin-bottom: 16rpx;
}
.popup-actions {
  margin-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}
.popup-btn {
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  background: #f0f2f7;
  color: #1e1f23;
}
.popup-btn.confirm {
  background: #60a4f7;
  color: #ffffff;
}
</style>
